<!DOCTYPE html>
<html>
<head>
    <title>北京站网格化系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="../lib/css/common/style.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/themes/flat-blue.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/common/newstyle.css">
    <!-- CSS datetimepick -->
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.datetimepicker.css">
    <!--  -->
    <link rel="stylesheet" type="text/css" href="../lib/js/jquery-treegrid-master/jquery.treegrid.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/baseCommon.css">
    <!-- css page -->
    <!-- <link rel="stylesheet" type="text/css" href="../lib/css/pagination.css"> -->
     <!-- Javascript Libs -->
    <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../lib/js/Chart.min.js"></script>
    <script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>
    <script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
    <script type="text/javascript" src="../lib/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="../lib/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
    <script type="text/javascript" src="../lib/js/ace/ace.js"></script>
    <script type="text/javascript" src="../lib/js/ace/mode-html.js"></script>
    <script type="text/javascript" src="../lib/js/ace/theme-github.js"></script>
    <script type="text/javascript" src="../lib/js/datetimepicker.js"></script>
    <!-- Javascript -->
    <script type="text/javascript" src="../lib/js/common/app.js"></script>
    <script type="text/javascript" src="../lib/js/common/index.js"></script>
    <!-- Javascript -->
    <script src="../lib/js/jquery-treegrid-master/jquery.treegrid.min.js"></script>
    <script src="../lib/js/organization.js"></script>
    <script src="../lib/js/jquery-treegrid-master/jquery.treegrid.bootstrap3.js"></script>
    <script src="../lib/js/jquery-treegrid-master/jquery.treegrid.extension.js"></script>
    
    <!-- 页码 -->
    <!-- <script src="../lib/js/jquery.pagination.js" type="text/javascript"></script> -->
</head>

<body class="flat-blue">
    <div class="app-container expanded">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid">
                   <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle fa-rotate-90">
                        <i class="fa fa-bars icon"></i>
                        </button>
                        <ul class="nav navbar-nav navbar-left no-border">
                        <ul class="nav navbar-nav navbar-left no-border">
                            <li class=""><a href="./organization-base-depsetting.html">部门设置</a></li>
                            <li class=""><a href="./organization-base-role.html">角色设置</a></li>
                            <li class="active"><a href="./organization-base-station.html">岗位设置</a></li>
                            <li class=""><a href="./organization-base-info.html">组织信息</a></li>
                        </ul>
                        </ul>
                        </div>
                </div>
            </nav>
            <div class="side-menu sidebar-inverse">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="side-menu-container">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">
                                <div class="icon fa fa-train"></div>
                                <div class="title">北京站</div>
                            </a>
                            <button type="button" class="navbar-expand-toggle pull-right visible-xs">
                                <i class="fa fa-times icon"></i>
                            </button>
                        </div>
                        <ul class="nav navbar-nav">
                            <li class="panel panel-default dropdown active">
                                <a data-toggle="collapse"  href="#dropdown-organization">
                                    <span class="icon fa fa-users"></span><span class="title">组织管理</span>
                                </a>
                            </li>
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-device">
                                    <span class="icon fa fa-wrench"></span><span class="title">设备管理</span>
                                </a>
                            </li>
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-quantitave">
                                    <span class="icon fa fa-trophy"></span><span class="title">量化任务</span>
                                </a>
                            </li>
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-info">
                                    <span class="icon fa fa-comment"></span><span class="title">信息管理</span>
                                </a> 
                            </li>
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-task">
                                    <span class="icon fa fa-road"></span><span class="title">作业管理</span>
                                </a>
                            </li>
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-emergency">
                                    <span class="icon fa fa-bolt"></span><span class="title">应急处置</span>
                                </a>
                            </li>
                        </ul>
                        
                    </div>
                    <!-- /.navbar-collapse -->
                </nav>
                <div class="nav-bar2">
                    <div class="navbar-title">
                        <p class="title">组织管理</p>
                    </div>
                    <div id="dropdown-organization" class="panel-collapse collapse in" aria-expanded="true">
                        <ul class="nav navbar-nav">
                            <li><a href="./organization-base-depsetting.html">基础信息</a></li>
                            <li><a href="./organization-people-base.html">人员信息管理</a></li>
                            <li><a href="./organization-grid-manage.html">网格管理</a></li>
                        </ul>
                    </div>
                    <div id="dropdown-device" class="panel-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="#">设备信息</a></li>
                        </ul>
                    </div>
                    <div id="dropdown-quantitave" class="panel-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="#">任务管理</a></li>
                        </ul>
                    </div>
                    <div id="dropdown-info" class="panel-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="#">信息分类</a></li>
                        </ul>
                    </div>
                    <div id="dropdown-task" class="panel-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="#">作业流程管理</a></li>
                            <li><a href="#">作业任务管理</a></li>
                            <li><a href="#">列车信息管理</a></li>
                        </ul>
                    </div>
                    <div id="dropdown-emergency" class="panel-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="#">应急处置管理</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 中间内容 -->
            <!-- Main Content -->
            <div class="container-fluid base_all">
                <div class="station_select">
                    <!-- 按钮 -->
                <div class="add">
                    <button type="button" class="btn btn-primary btn_color btn_add_station" style="background: #108EE9;border: 0">添加岗位</button>
                </div>
                <!-- 表格 -->
                <div class="table_style">
                     <table class="table table-hover table_staion">
                        <thead>
                            <tr>
                                <th>岗位名称</th>
                                <th>岗位说明</th>
                                <th>所属部门</th>
                                <th>岗位类别</th>
                                <th class="assort">作业人员</th>
                                <th>责任网格</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class="table_body">
                            <!-- <tr>
                                <td class="post_table">一候客运员</td>
                                <td class="info_table">一候车客运人员</td>
                                <td class="station_table">客运车间</td>
                                <td class="cate_table">作业岗位</td>
                                <td class="people_table">一候客运员</td>
                                <td class="duty_table">一候客运</td>
                                <td><a href="#" class="table_editor" style="color: #108EE9;margin-right: 2px;">编辑</a>|<a href="#" class="table_del" style="color: #108EE9;margin-left: 2px;">删除</a></td>
                            </tr> -->
                        </tbody>
                </table>
                    <!-- 页码 -->
                   <!--  <div class="M-box1" style="font-size:10px;text-align:center;" id="page_string">
                    </div> -->
                    <div class="page">
                        <nav aria-label="Page navigation">
                          <ul class="pagination">
                            <li>
                              <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                              </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">6</a></li>
                            <li><a href="#">7</a></li>
                            <li><a href="#">8</a></li>
                            <li><a href="#">9</a></li>
                            <li><a href="#">10</a></li>
                            <li>
                              <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                              </a>
                            </li>
                          </ul>
                        </nav>
                    </div>
                </div>
                </div>
                
                <!-- 添加编辑岗位 -->
                <div class="job_select" style="display: none;margin-top: 20px;">
                <!-- 标题 -->
                <div class="nav_logo">
                    <p style="font-size: 17px;padding-bottom: 2px;">
                        <span style="color: #108DEC;">岗位添加</span>/添加/编辑岗位
                    </p>
                </div>
                <div class="form_select">
                   <dl>
                       <dt>岗位名称：</dt>
                       <dd>
                           <input type="text" class="form-control postName" value="" placeholder="请输入" style="width: 320px;border-radius: 4px;">
                       </dd>
                   </dl>
                   <dl>
                       <dt>所属部门：</dt>
                       <dd>
                           <select name="" style="width: 320px;" class="plant">
                               <option value="0">客运车间</option>
                               <option value="1">上水车间</option>
                               <option value="2">信息化车间</option>
                               <option value="3">房修车间</option>
                           </select>
                       </dd>
                   </dl>
                   <dl style="height: 64px;">
                       <dt>责任网格：</dt>
                       <dd>
                           <div class="tag">
                              <p class="tag_p">
                                <span class="circleX circle_grid"><b class="circleGird">客运员</b><em class="close_up">×</em></span>
                               <span class="circleX circle_grid"><b class="circleGird">一候</b><em class="close_up">×</em></span>
                               <span class="circleX circle_grid"><b class="circleGird">二候</b><em class="close_up">×</em></span>
                               <span class="circleX circle_grid"><b class="circleGird">三候</b><em class="close_up">×</em></span>
                              </p>
                               <p>
                                   <a href="#" class="line onemore" style="color: #10A9F1;">继续添加</a>
                               </p>
                               
                           </div>
                       </dd>
                   </dl>
                   <dl class="one">
                       <dt>岗位类别：</dt>
                       <dd>
                           <select name="" style="width: 320px;" class="classify" id="classify">
                               <option value="0">作业人员</option>
                               <option value="1">作业岗位</option>
                           </select>
                       </dd>
                   </dl>
                   <dl class="two">
                       <dt>作业人员：</dt>
                        <dd class="tag_div">
                        <div class="tag">
                        <p class="tag_people">
                          <span class="circleX circle_people"><b class="circlePeople">张三</b><em class="close_up">×</em></span>
                          <span class="circleX circle_people"><b class="circlePeople">李四</b><em class="close_up">×</em></span>
                          <span class="circleX circle_people"><b class="circlePeople">王五</b><em class="close_up">×</em></span>
                          <span class="circleX circle_people"><b class="circlePeople">刘流</b><em class="close_up">×</em></span>
                          <span class="circleX circle_people"><b class="circlePeople">张三</b><em class="close_up">×</em></span>
                        </p>
                        
                        <p>
                          <a href="#" class="line twomore" style="color: #10A9F1;">继续添加</a>
                        </p>
                        </div>
                        </dd>  
                   </dl>
                   <dl class="three">
                       <dt>岗位说明：</dt>
                       <dd>
                           <textarea class="form-control duty_form" rows="3" style="width: 640px;height: 72px;" placeholder="正在输入..." value=""></textarea>
                       </dd>
                   </dl>
                </div>
                <div class="add" style="margin-top: 120px;">
                  <button type="button" class="btn btn-primary btn_color btn_add_job" style="background: #108EE9;border: 0">添加职位</button>
                  <button type="button" class="btn btn-primary btn_color btn_editor_job" style="background: #108EE9;border: 0">保存修改</button>
                </div>
                <!-- 组织架构 -->
                <div class="oranize">
                    <span class="circleX circle_people"><b class="circlePeople">张三</b><em class="close_up">×</em></span>
                          <span class="circleX circle_people"><b class="circlePeople">李四</b><em class="close_up">×</em></span>
                          <span class="circleX circle_people"><b class="circlePeople">王五</b><em class="close_up">×</em></span>
                          <span class="circleX circle_people"><b class="circlePeople">刘流</b><em class="close_up">×</em></span>
                          <span class="circleX circle_people"><b class="circlePeople">张三</b><em class="close_up">×</em></span>
                </div>
                </div> 
            </div>
        </div>
        <div>
</body>
<script>
   // $(function(){
   //   stationTable();
   // })
   // 岗位列表
    function stationTable(){
        $.ajax({
            url:"http://119.23.232.192:8081/Organization/post/post_list",
            type:"post",
            data:{},
            async:true,
            dataType:"json",
            success:function(msg){
                var shtml = "";
                if(msg.code==0){
                    var list = msg.data;
                    // console.log(list);
                    for(var i in list){
                        shtml+='<tr class="id_tr" rel='+list[i].post_id+'>';
                        shtml+='<td class="post_table">'+list[i].post_name+'</td>';
                        shtml+='<td class="info_table">'+list[i].post_desc+'</td>';
                        shtml+='<td class="station_table">'+list[i].department_name+'</td>';
                        shtml+='<td class="cate_table">'+list[i].post_type_name+'</td>';
                        shtml+='<td class="people_table">'+list[i].post_user+'</td>';
                        shtml+='<td class="duty_table">'+list[i].post_grid+'</td>';
                        shtml+='<td><a href="#" class="table_editor" style="color: #108EE9;margin-right: 2px;">编辑</a>|<a href="#" class="table_del" style="color: #108EE9;margin-left: 2px;">删除</a></td>';
                        shtml+='</tr>';
                    }
                    $(".table_body").html(shtml);
                }
                
            }
        })
    }
    stationTable()
    // 点击编辑
    // 岗位类别的切换
    var shtml="";
    $(".classify").change(function(){
    if($(this).val()==0){
        var circlePeople = $(".circlePeople").text();
        $(".circlePeople").text(circlePeople)
        $(".two").show();

    }else if($(this).val()==1){ 
        $(".two").hide();
        $(".circlePeople").text('')
    } 
    })
    // 编辑
    var post_id="";
    $(".table_body").on('click','.table_editor',function(){
        $(".station_select").hide();
        $(".btn_add_job").hide();
        $(".btn_editor_job").show();
        $(".job_select").show();
        post_id=$(this).parents('td').parents('tr').attr('rel');
        // 岗位名称
        var postName = $(this).parent().siblings('.post_table').text();
        // 岗位说明
        var postDesc = $(this).parent().siblings('.info_table').text();
        // 所属部门
        var departmentId = $(this).parent().siblings('.station_table').text();
        // 岗位类别
        var postType = $(this).parent().siblings('.cate_table').text();
        // 作业人员
        var postUser = $(this).parent().siblings('.people_table').text();
        // 责任网格
        var postGrid = $(this).parent().siblings('.duty_table').text();
        $.ajax({

        })
        //  $(".postName").val(post_table);
        //  $(".duty_form").val(info_table);
        // $(".plant option:selected").text(station_table);
        //  // console.log(plant)
        // $(".classify option:selected").text(cate_table);
        // // console.log(class1)
        //  $(".circlePeople").text(people_table);
        //  $('circleGird').text(duty_table);

    })
    // 保存修改
    $(".btn_editor_job").on('click',function(){
        $(".station_select").show();
        $(".job_select").hide();
        // 岗位名称
        var postName = $(".postName").val();
        // 所属部门
        var plant = $(".plant option:selected").text();
        // 责任网格
        var circleGird = $(".circleGird").text();
        // 岗位类别
        var classify = $(".classify option:selected").text();
        //作业人员
        var circlePeople = $('.circlePeople').text();
        // 岗位说明
        var duty_form = $(".duty_form").val();
        // $('.post_table').text(postName);
        // $('.info_table').text(duty_form);
        // $('.station_table').text(plant);
        // $('.cate_table').text(classify);
        // $('.people_table').text(circlePeople);
        // $('.duty_table').text(circleGird);
    })
    // 添加岗位
    $(".btn_add_station").on('click',function(){
        $(".station_select").hide();
        $(".btn_editor_job").hide();
        $(".btn_add_job").show();
        $(".job_select").show();
        $(".postName").val('');
        $(".duty_form").val('');
    })
    // 添加职位
    $('.btn_add_job').on('click',function(){
        $(".station_select").show();
        $(".job_select").hide();
        // 岗位名称
        var postName = $(".postName").val();
        // 所属部门
        var plant = $(".plant option:selected").text();
        // 责任网格
        var circleGird = $(".circleGird").text();
        // 岗位类别
        var classify = $(".classify option:selected").text();
        //作业人员
        var circlePeople = $('.circlePeople').text();
        // 岗位说明
        var duty_form = $(".duty_form").val();
        
        // 添加信息
        $.ajax({
          url:"http://119.23.232.192:8081/Organization/post/edit_post",
          type:"post",
          data:{
            'post_id':post_id,
            'post_name':postName,
            'post_desc':duty_form,
            'department_id':plant,
            'post_type_id':classify,
            'post_user':circlePeople,
            'post_grid':circleGird
          },
          async:true,
          dataType:"json",
          success:function(msg){
            if(msg.code==0){
              var shtml="";
              var list = msg.data;
              shtml+='<tr class="idArr" rel='+list[i].post_id+'>';
              shtml+='<td class="post_table">'+list[i].post_name+'</td>';
              shtml+='<td class="info_table">'+list[i].post_desc+'</td>';
              shtml+='<td class="station_table">'+list[i].department_name+'</td>';
              shtml+='<td class="cate_table">'+list[i].post_type_name+'</td>';
              shtml+='<td class="people_table">'+list[i].post_user+'</td>';
              shtml+='<td class="duty_table">'+list[i].post_grid+'</td>';
              shtml+='<td><a href="#" class="table_editor" style="color: #108EE9;margin-right: 2px;">编辑</a>|<a href="#" class="table_del" style="color: #108EE9;margin-left: 2px;">删除</a></td>';
              shtml+='</tr>';
            }
            $(".table_body").append(shtml)
          }
        })
        
        
    })
    // 添加责任网格
    $(".onemore").on('click',function(){
      // 弹出组织架构
      $(".oranize").show();
      var shtml="";
      shtml+='<span class="circleX circle_grid"><b class="circlePeople">张三</b><em>×</em></span>';
      $(".tag_p").append(shtml);
    })
    // 添加作业人员
    $(".twomore").on('click',function(){
      var shtml="";
      shtml+='<span class="circleX circle_people"><b class="circlePeople">张三</b><em>×</em></span>';
      $(".tag_people").append(shtml);
    })
    // 点击删除
    $(".table_body").on('click','.table_del',function(){
      post_id = $(this).parents('td').parents('tr').attr('rel');
      $.ajax({
        url:"http://119.23.232.192:8081/Organization/post/del_post",
        type:"post",
        data:{
          'post_id':post_id
        },
        async:true,
        dataType:"json",
        success:function(msg){
          if(msg.code==0){
            $(this).parent().parent().remove();
          }
          
        }
      })
     
    })
    // 点击删除X
    $(".close_up").on('click',function(){
      $(this).parent().remove();
    })
</script>
</html>
